<template>
    <div class="leaderBg">
        <div class="leaderBox">
            <div class="picBox">
                <img src="../../assets/images/rwb.png" alt="">
            </div>
            <div class="titleBox">
                <div class="titleImgDiv">
                    <img src="../../assets/images/djb.png" alt="">
                </div>
                <div class="titleImgDiv">
                    <img src="../../assets/images/gsz.png" alt="">
                </div>
                <div class="titleImgDiv">
                    <img src="../../assets/images/gscg.png" alt="">
                </div>
            </div>
            <div class="detailBox">
                <div class="borderBox">
                    <table class="fixed-table">
                        <tr>
                            <th width="18%">序号</th>
                            <th width="42%">任务名称</th>
                            <th width="40%">发起人</th>
                        </tr>
                    </table>
                    <div class="contentBox">
                        <el-table :data="waitOpenBillList" :class="[waitOpenBillList.length>0?'scroll-table scroll-animation':'']" @row-click="handleWaitReleaseClick">
                            <el-table-column type="index" min-width="18%"/>
                            <el-table-column align="left" prop="task.title" min-width="41%">
                                <template #default="scope">
                                    <el-tooltip :content="scope.row.task.title" placement="bottom">
                                        <div class="cell-content">
                                            {{ scope.row.task.title }}
                                        </div>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column align="left" prop="task.originator" min-width="41%"/>
                        </el-table>
                    </div>
                </div>

                <div class="borderBox">
                    <table class="fixed-table">
                        <tr>
                            <th width="18%">序号</th>
                            <th width="42%">任务名称</th>
                            <th width="40%">揭榜人</th>
                        </tr>
                    </table>
                    <div class="contentBox">
                        <el-table :data="waitLeaderList" :class="[waitLeaderList.length>0?'scroll-table scroll-animation':'']" @row-click="handleWaitLeaderClick">
                            <el-table-column type="index" min-width="18%"/>
                            <el-table-column align="left" prop="task.title" min-width="41%">
                                <template #default="scope">
                                    <el-tooltip :content="scope.row.task.title" placement="bottom">
                                        <div class="cell-content">
                                            {{ scope.row.task.title }}
                                        </div>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column align="left" prop="task.implementer" min-width="41%"/>
                        </el-table>
                    </div>
                </div>

                <div class="borderBox">
                    <table class="fixed-table">
                        <tr>
                            <th width="18%">序号</th>
                            <th width="42%">任务名称</th>
                            <th width="40%">揭榜人</th>
                        </tr>
                    </table>
                    <div class="contentBox">
                        <el-table :data="leaderSuccessList" :class="[leaderSuccessList.length>0?'scroll-table scroll-animation':'']" @row-click="handleLeaderSuccessClick">
                            <el-table-column type="index" min-width="18%"/>
                            <el-table-column align="left" prop="task.title" min-width="41%">
                                <template #default="scope">
                                    <el-tooltip :content="scope.row.task.title" placement="bottom">
                                        <div class="cell-content">
                                            {{ scope.row.task.title }}
                                        </div>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column align="left" prop="task.implementer" min-width="41%"/>
                        </el-table>
                    </div>
                </div>

            </div>
        </div>
        <div class="leaderBox">
            <div class="picBox">
                <img src="../../assets/images/cgb.png" alt="">
            </div>
            <div class="titleBox">
                <div class="titleImgDiv">
                    <img src="../../assets/images/pb.png" alt="">
                </div>
                <div class="titleImgDiv">
                    <img src="../../assets/images/jb.png" alt="">
                </div>
                <div class="titleImgDiv">
                    <img src="../../assets/images/yb.png" alt="">
                </div>
            </div>
            <div class="detailBox">
                <div class="borderBox">
                    <table class="fixed-table">
                        <tr>
                            <th width="18%">序号</th>
                            <th width="42%">任务名称</th>
                            <th width="40%">得分</th>
                        </tr>
                    </table>
                    <div class="contentBox">
                        <el-table :data="evaluateBillList" :class="[evaluateBillList.length>0?'scroll-table scroll-animation':'']" @row-click="handleEvaluateBillClick">
                            <el-table-column type="index" min-width="18%"/>
                            <el-table-column align="left" prop="task.title" min-width="38%">
                                <template #default="scope">
                                    <el-tooltip :content="scope.row.task.title" placement="bottom">
                                        <div class="cell-content">
                                            {{ scope.row.task.title }}
                                        </div>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column align="left" prop="score" min-width="44%">
                                <template #default="scope">
                                    <el-icon v-for="scitem in scope.row.task.rating" :size="14" color="#f8fd1e"><Star /></el-icon>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>

                <div class="borderBox">
                    <table class="fixed-table">
                        <tr>
                            <th width="18%">序号</th>
                            <th width="42%">任务名称</th>
                            <th width="40%">奖励内容</th>
                        </tr>
                    </table>
                    <div class="contentBox">
                        <el-table :data="awardBillList" :class="[awardBillList.length>0?'scroll-table scroll-animation':'']" @row-click="handleAwardBillClick">
                            <el-table-column type="index" min-width="18%"/>
                            <el-table-column align="left" prop="task.title" min-width="41%">
                                <template #default="scope">
                                    <el-tooltip :content="scope.row.task.title" placement="bottom">
                                        <div class="cell-content">
                                            {{ scope.row.task.title }}
                                        </div>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column align="left" prop="content" min-width="41%">
                                <template #default="scope">
                                    <el-tooltip :content="scope.row.content" placement="bottom">
                                        <div class="cell-content">
                                            {{ scope.row.content }}
                                        </div>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>

                <div class="borderBox">
                    <table class="fixed-table">
                        <tr>
                            <th width="18%">序号</th>
                            <th width="42%">任务名称</th>
                            <th width="40%">成果转化</th>
                        </tr>
                    </table>
                    <div class="contentBox">
                        <el-table :data="useBillList" :class="[useBillList.length>0?'scroll-table scroll-animation':'']" @row-click="handleUseBillClick">
                            <el-table-column type="index" min-width="18%"/>
                            <el-table-column align="left" prop="task.title" min-width="41%">
                                <template #default="scope">
                                    <el-tooltip :content="scope.row.task.title" placement="bottom">
                                        <div class="cell-content">
                                            {{ scope.row.task.title }}
                                        </div>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column align="left" prop="content" min-width="41%">
                                <template #default="scope">
                                    <el-tooltip :content="scope.row.content" placement="bottom">
                                        <div class="cell-content">
                                            {{ scope.row.content }}
                                        </div>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { detailTopByStage } from "@/api/putleader/putleader.js"; 
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const { proxy } = getCurrentInstance();
import useAppStore from '@/store/modules/app'
import { ref } from "vue";
const appStore = useAppStore()
const waitOpenBillList = ref([]);//待揭榜
const waitLeaderList = ref([]);//挂帅中
const leaderSuccessList = ref([]);//挂帅成功
const evaluateBillList = ref([]);//评榜
const awardBillList = ref([]);//奖榜
const useBillList = ref([]);//用榜

// 初始化数据
function initData() {
    detailTopByStage().then(response => {
        let dataArray = response.data;
        //待揭榜30、挂帅中50(攻榜中)、挂帅成功60、评榜61、奖榜62，用榜63
        if (dataArray!= null && dataArray.length > 0) {
            dataArray.forEach(item => {
                if (item.key == 30) {//待揭榜
                    waitOpenBillList.value = item.value;
                } else if (item.key == 50) {//挂帅中
                    waitLeaderList.value = item.value;
                } else if (item.key == 60) {//挂帅成功
                    leaderSuccessList.value = item.value;
                } else if (item.key == 61) {//评榜
                    evaluateBillList.value = item.value;
                } else if (item.key == 62) {//奖榜
                    awardBillList.value = item.value;
                } else if (item.key == 63) {//用榜
                    useBillList.value = item.value;
                }
            });
        }
    });
}
onMounted(() => {
    appStore.toggleSideBarHide(true);
    document.querySelector('.navbar').remove();
    document.querySelector('.tags-view-container').remove();
    document.querySelector('.sidebar-container').remove();
    document.querySelector('.fixed-header').remove();
    document.querySelector('.fixed-top').remove();
    initData();
})

let bigScreenTimer = setInterval(() => {
    initData();
}, 300000);

onUnmounted(() => {
    clearInterval(bigScreenTimer);
});

// 待揭榜点击事件
function handleWaitReleaseClick(row, column, event) {
    window.open('/putleadermanage/openbill', 'MyWindow');
}
// 挂帅中点击事件
function handleWaitLeaderClick(row, column, event) {
    window.open('/putleadermanage/beatbill', 'MyWindow');
}
// 挂帅成功点击事件
function handleLeaderSuccessClick(row, column, event) {
    window.open('/putleadermanage/beatbill', 'MyWindow');
}

// 评榜点击事件
function handleEvaluateBillClick(row, column, event) {
    window.open('/putleadermanage/evalutebill', 'MyWindow');
}
// 奖榜点击事件
function handleAwardBillClick(row, column, event) {
    window.open('/putleadermanage/rewardbill', 'MyWindow');
}
// 用榜点击事件
function handleUseBillClick(row, column, event) {
    window.open('/putleadermanage/usebill', 'MyWindow');
}
</script>
<style>
.app-wrapper .main-container .app-main {
    height: 100%!important;
    background: linear-gradient(to right bottom, rgb(24, 48, 132) 0%, rgb(21, 16, 51) 100%)!important;
}
.scroll-container {
  height: 100%!important;
  overflow: hidden;
  margin-top: 9px;
}
.scroll-content {
  height: 600px; /* 足够高以确保滚动 */
}
.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
    background-color: rgba(255, 0, 0, 0)!important;
    color: aquamarine!important;
}
</style>
<style lang="scss" scoped>
.leaderBg{
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 100%;
    background-image: url("../../assets/images/jbgs.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    font-family: CapCut Sans,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif!important;
    font-size: 15px;
}
.leaderBg .leaderBox{
    position: relative;
    top: 15%;
    width: 45%;
    height: 80%;
    display: flex;
    align-items: center;
    flex-direction: column;
    .titleBox{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .titleImgDiv {
            width: 244px;
            height: 79px;
            margin-right: 10px;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .detailBox {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        margin: 19px;
        .borderBox{
            position: relative;
            width: 30%;
            height: 90%;
            border: 33px solid #fff;
            border-image: url("../../assets/images/border.svg") 33 round;
            color: #fff;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin-right: 9px;
            .contentBox{
                position: absolute;
                top: 21px;
                left: -19px;
                background-color: rgba(249, 76, 76, 0.5);
                color: rgba(252, 228, 196, 1);
                margin: 0px;
                padding: 0px;
                width: 120%;
                height: 90%;
                overflow: hidden;
                z-index: 19!important;
            }
        }
    }
}
.fixed-table {
    z-index: 199!important;
    background-color: #d92929;
    height: 10%;
    width: 120%;
    position: absolute;
    top: 20px;
    left: -19px;
    overflow: hidden;
    color: aquamarine!important;
    box-shadow: #d92929 0px 0px 10px 0px;
}
table {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 370px;
    color: #fee6b6;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 9000;
    tr{
        width: 100%;
        th, td {
            padding: 9px 5px;
            text-align: center;
            font-size: 13px;
        }
        th {
            position: sticky;  
            top: 0;
            font-size: 15px;
        }
    }
}

/* 高亮当前行 */
tbody tr:hover {
    background: rgba(0, 150, 255, 0.1);
}

/* 表格主体 */
.scroll-table {
    width: 100%;
    border-collapse: collapse;
    color: #fee6b6;
    transform: translateY(0); /* 初始位置 */
    overflow: hidden;
}

/* 滚动动画 */
.scroll-animation {
    animation: scroll 39s linear infinite;
}

@keyframes scroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); } /* 滚动到数据末尾 */
}

/* 悬停暂停 */
.contentBox:hover .scroll-table {
    animation-play-state: paused;
}


:deep(.el-table) {
  /* 透明度为0，不显示背景色 */
  background-color: rgba(255, 240, 240, 0);
}

/* 头部标题组件 */
:deep(.el-table th.el-table__cell) {
  /* 透明度为0，不显示背景色 background-color: rgba(255, 0, 0, 0); */
  background-color: rgba(255, 0, 0, 0);
  /* 文字颜色 */
  color: skyblue;
  /* 背景图片，可以为表格头部设置背景颜色，不过如果背景是透明的，
  可以直接把父div的背景图片当做是这里的图片，只要把表格放在对应的位置就行了，
  看自己选择 
  */
  /* background-image: url("https://element-plus.org/images/element-plus-logo.svg"); */
}

/* 头部与body下面的分割线 */
:deep(.el-table th.el-table__cell.is-leaf) {
  border-bottom: none;
}



/* 表格行背景色 */
:deep(.el-table tr) {
  /* 透明度为0，不显示背景色 */
  background-color: rgba(255, 0, 0, 0); 
  /* 文字颜色 */
  color: aquamarine;
}

/* 表格行之间的分割线 */
:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
  border-bottom: none;
}

/* 表格底部分割线，不知道表达的是什么，注释一下这个就知道了  */
:deep(.el-table__inner-wrapper:before) {
  bottom: 0;
  height: 0px;
  left: 0;
}


/* 鼠标悬停背景色 */
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
  background-color: rgba(116, 85, 228, 0.671);
  cursor: pointer;
}

:deep(.el-table__empty-text) {
    color: aquamarine!important;
}
.el-tooltip__popper {
  z-index: 9999999!important; /* 或者更高的值 */
}
:deep(.el-tooltip__popper) {
  z-index: 9999999!important; /* 或者更高的值 */
}
.cell-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>